<template>
    <div id="buycart">
       
         <!-- info -->
        <div class="info">
            <span>30天无忧退货</span>
            <span>48小时快速退款</span>
            <span>满88元免邮费</span>
        </div>
        <!-- 商品卡片组件 -->
        <div class="list">
            <div class="cartItem" v-for="(item,index) in cartList" :key="'proCaed'+index">
                <van-checkbox @change="changeEvent($event,item)" v-model="item.checked"></van-checkbox>
                <van-image
                    width="70"
                    height="70"
                    fit="cover"
                    :src="item.list_pic_url"
                />
                <div class="proBrief">
                    <div class="title">
                        <span>{{item.goods_name}}</span>
                        <span class="nums"> x{{item.number}} </span>
                    </div>
                    <div class="breaf">
                        {{item.goods_specifition_name_value}}
                    </div>
                    <p class="price"> ￥{{item.retail_price}}</p>
                </div>
            </div>
        </div>
        <!-- 提交订单兰 -->
        <div>
            <van-submit-bar 
            :price="cartTotal.checkedGoodsAmount*100" 
            button-text="提交订单" 
            @submit="onSubmit">
                <van-checkbox v-model="checkedAll">全选</van-checkbox>
                
                </van-submit-bar>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import api from '../assets/config/api.js'
import {mapState} from 'vuex'
let mapstateObj =mapState(['cartTotal','cartList']);
export default {
    data() {
        return {}  
    },
    computed:{
        ...mapstateObj, 
        checkedAll:{
           set(val){
               console.log(val,'设置全选');
           },
           get(){  
            if(this.cartTotal.checkedGoodsCount==this.cartTotal.goodsCount){
                return true
            }else{
                return false
            }
           }
        }
    },
    created(){
        this.$store.dispatch('AjaxCart');
    },
    mounted(){
        console.log(this.cartList);
    },
    methods:{
        onSubmit:function(){
            console.log("提交事件");
        },
        changeEvent:async function(event,item){
            console.log(event);
            console.log(item);
            let res=await axios.post(api.CartChecked,{ productIds: item.product_id, isChecked: Number(event) } );
            let data=res.data.data
            console.log(data );
            this.$store.commit('setCarlist',data.cartList);
            this.$store.commit('setCarTotal',data.cartTotal);
            this.$forceUpdate();
        }
    }
}
</script>


<style lang="less">
    #buycart{
       .info{
            display: flex;
            justify-content: space-around;
            font-size: 14px;
            color: #999;
            height: 25px;
            line-height: 25px;
            background:#efefef;
            span{
                position: relative;
            }
            span::before{
                content: "";
                display: block;
                position:absolute;
                left: -10px;
                top: 9px;
                width: 4px;
                height: 4px;
                border-radius: 2px;
                border: 1px solid red;
            }
        }  
        .cartItem{
            display: flex;
            align-items: center;
            padding: 10px 10px;
            .van-checkbox{
                margin: 0px 5px;
            }
            .van-image{
                background: #efefef;
            }
            .proBrief{
                flex:1;
                display: flex;
                padding: 10px 5px;
                height: 70px;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                .title{
                   
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                }
                .breaf{
                    color: #999;
                }
                .price{
                    color: red;
                }
            }
            
        }
    }
</style>